<template>
  <div class="updatazhibo1" id="divId">
    <div class="zhibo-body">
      <div class="zhibo-left">
        <div class="zhi-left-zhu">
          <img :src="userInfo.anchors[0].avatar" />
          <div>{{ userInfo.name }}</div>
        </div>
        <div class="zhi-left-current">
          <img :src="userInfo.background" />
        </div>
        <div>
          <div class="zhi-left-discount">
            <span class="discount-span1">在线人数</span>
            <span class="discount-span2"
              >当前<span class="discount-span3">{{
                userInfo.onlineNumber
              }}</span>
              人</span
            >
          </div>
          <div>
            <echarts-from
              ref="visitChart"
              :yAxisData="yAxisData"
              :seriesData="series"
              :xAxis="xAxis"
              v-if="info"
              :legendData="legendData"
            ></echarts-from>
          </div>
        </div>
        <div>
          <div class="zhi-left-discount">
            <span class="discount-span1">累计点赞</span>
            <span class="discount-span2"
              >累计<span class="discount-span3">{{ userInfo.likes }}</span>
            </span>
          </div>
          <div>
            <echarts-from
              ref="visitChart"
              :yAxisData="yAxisData"
              :seriesData="series"
              :xAxis="xAxis"
              v-if="info"
              :legendData="legendData"
            ></echarts-from>
          </div>
        </div>
      </div>
      <div class="zhibo-current">
        <h1>美咚·数据直播大屏</h1>
        <h2>订单金额</h2>
        <div class="zhibo-shopping">
          {{ 165842.25 | FormatMoney }}<span>元</span>
        </div>
        <div class="zhibo-xiao">
          <span
            >销量 <span class="xiao-shu">{{ 3214 }}</span></span
          >
          <span
            >累计观看人数 <span class="xiao-shu">{{ userInfo.views }}</span>
          </span>
        </div>
        <ul>
          <li class="zhibo-li-top">
            <span class="top-shang">商品</span>
            <span class="top-number"
              >共 <span class="top-shopplist">{{ shopplist.length }}</span
              >件</span
            >
            <span class="top-zhibo">直播价</span>
            <span class="top-timeday">上架时间</span>
            <span class="top-xiaonum">销量</span>
            <span class="top-xiaomoney">销售额</span>
          </li>
          <div v-if="shopplist.length > 0" class="zhibo-li">
            <li
              class="zhibo-li-body"
              v-for="(item, index) in shopplist"
              :key="index"
            >
              <span class="top-shang"
                ><span class="top-span">{{ index + 1 }}</span>
              </span>
              <span class="top-number">
                <img :src="item.cover ? item.cover : imagelogo" />
                <span class="top-shopptitle">{{ item.title }}</span>
              </span>
              <span class="top-zhibo">{{ item.lowPrice }}</span>
              <span class="top-timeday">{{ item.updateTime }}</span>
              <span class="top-xiaonum">{{ 0 }}</span>
              <span class="top-xiaomoney">{{ 524 | FormatMoney }}</span>
            </li>
          </div>
          <div v-else class="zhibo-li-wu">暂无商品</div>
        </ul>
      </div>
      <div class="zhibo-right">
          <div class="zhibo-right-top">
              <div class="right-div">
                  <div class="div-top">开播时间</div>
                  <div class="div-bottom">{{userInfo.startTime ? userInfo.startTime : userInfo.scheduleTime}}</div>
              </div>
              <div class="right-div">
                  <div class="div-top">直播时长</div>
                  <div class="div-bottom" v-if="timedifference">{{timedifference}}</div>
                  <div class="div-bottom" v-else>00小时00分钟</div>
              </div>
          </div>
          <div class="right-hudong">
            <div class="div-top">互动分析 <i class="el-icon-message-solid"></i></div>
          </div>
          <div class="right-message" v-if="messageList.length>0" id="message">
            <div v-for="(item,index) in messageList" :key="index" class="message-list">
               <div class="message-shijian">
                 {{item.sendTime}}
               </div>
               <img :src="item.avatar">
               <div>
                 {{item.nick}}：{{item.message}}
               </div>
            </div>
          </div>
      </div>
    </div>
  </div>
</template>
<script>
import TIM from "tim-js-sdk";
import { getmeizhiInfo, getmeizhishopping,getmessagelist } from "@/api/marketing";
import echartsFrom from "@/components/echarts/index3";
import screenfull from 'screenfull'
import { formatDates } from '@/utils/index';
import { date } from 'jszip/lib/defaults';
// import TIMUploadPlugin from 'tim-upload-plugin';
export default {
  components: { echartsFrom },
  data() {
    return {
      userInfo: {}, //直播间信息
      id: "", //直播间ID
      timedifference: "", //时间差
      yAxisData: [], //y轴
      xAxis: [], //x轴
      info: {}, //是否有内容
      series: [], //内容
      legendData: [],
      shopplist: [], //商品列表
      shopptotal: 0,
      imagelogo: "https://static9.meton.vip/10634_1649226955685.png",
      messageList:[],
      windowHeight:'',
    };
  },
  created() {
    screenfull.toggle()
    if (window.location.search.split("=")[1]) {
      this.id = window.location.search.split("=")[1];
      this.dataInfo();
      this.getshopp();
      this.getmessagelist()
    }
  },
  mounted(){
            let  that = this;
            window.onresize = function(){// 定义窗口大小变更通知事件
                that.windowHeight = document.documentElement.clientHeight; //窗口宽度
              console.log("val1111",that.windowHeight)
            }
        },
  methods: {
    widthupdata(){
      this.windowHeight = document.documentElement.clientHeight; //窗口宽度
              console.log("val1111",this.windowHeight)  
              let oIframe = document.getElementById('divId');
              oIframe.style.height=(Number(this.windowHeight)-120) + 'px'
    },
    //查看详情加IM登录
    dataInfo() {
      getmeizhiInfo(this.id).then((res) => {
        console.log("zhibo", res);
        this.userInfo = res;
        if (this.userInfo.startTime && this.userInfo.endTime) {
          this.timedifference = this.timedataup();
          console.log("时间差", this.timedifference);
        }
        this.updata();
      });
    },
    //查看详情
    dataInfo1() {
      getmeizhiInfo(this.id).then((res) => {
        console.log("zhibo", res);
        this.userInfo = res;
        if (this.userInfo.startTime && this.userInfo.endTime) {
          this.timedifference = this.timedataup();
          console.log("时间差", this.timedifference);
        }
        this.$set(this,'userInfo',this.userInfo)
      });
    },
    //主播间评论
    getmessagelist(){
      let parmas={
        liveId:this.id
      }
      getmessagelist(parmas).then(res=>{
        console.log(res,'评论')
          //  this.messageList=res ? res : []
          this.$set(this,'messageList',res ? res : [])
      })
    },
    //直播间商品
    getshopp() {
      let parmas = {
        liveId: this.id,
        current: 1,
        size: 999,
      };
      getmeizhishopping(parmas).then((res) => {
        this.shopplist = res.records;
        this.shopptotal = res.total;
      });
    },
    //直播时长
    timedataup(faultDate, completeTime) {
      var stime = Date.parse(new Date(this.userInfo.startTime));
      var etime = Date.parse(new Date(this.userInfo.endTime));
      // 两个时间戳相差的毫秒数
      var usedTime = etime - stime;
      // 计算相差的天数
      var days = Math.floor(usedTime / (24 * 3600 * 1000));
      // 计算天数后剩余的毫秒数
      var leave1 = usedTime % (24 * 3600 * 1000);
      // 计算出小时数
      var hours = Math.floor(leave1 / (3600 * 1000));
      // 计算小时数后剩余的毫秒数
      var leave2 = leave1 % (3600 * 1000);
      // 计算相差分钟数
      var minutes = Math.floor(leave2 / (60 * 1000));
      var time = hours + "小时" + minutes + "分钟";
      return time;
    },
    updata() {
      let that = this;
      let options = {
        SDKAppID: 1400668515, // 接入时需要将0替换为您的即时通信应用的 SDKAppID
      };
      that.tim = TIM.create(options);
      console.log("that.tim", that.tim);
      let promise = that.tim.login({
        userID: that.userInfo.identifier,
        userSig: that.userInfo.usersig2,
      });
      promise
        .then(function (imResponse) {
          console.log("Im登录成功", imResponse.data); // 登录成功
          let Promise = that.tim.joinGroup({
            groupID: that.userInfo.groupId,
            type: TIM.TYPES.GRP_AVCHATROOM,
          });
          Promise.then(function (imResponse) {
            console.log("进群信息", imResponse);
            switch (imResponse.data.status) {
              case TIM.TYPES.JOIN_STATUS_WAIT_APPROVAL: // 等待管理员同意
                break;
              case TIM.TYPES.JOIN_STATUS_SUCCESS: // 加群成功
                console.log("加入成功", imResponse.data.group); // 加入的群组资料
                break;
              case TIM.TYPES.JOIN_STATUS_ALREADY_IN_GROUP: // 已经在群中
                console.log("已在群里");
                break;
            }
          }).catch(function (imError) {
            console.warn("joinGroup error:", imError); // 申请加群失败的相关信息
          });
        })
        .catch(function (imError) {
          console.warn("login error:", imError); // 登录失败的相关信息
        });
      that.tim.on(TIM.EVENT.MESSAGE_RECEIVED, function (imResponse) {
        console.log("收到消息", imResponse);
        that.dataInfo1();
      that.getshopp();
      that.getmessagelist()
      });
    },
  },
};
</script>
<style lang="scss" scoped>
.updatazhibo1 {
  height: 100vh;
  width: 100%;
  padding: 20px 0;
  background: url(https://static9.meton.vip/10634_1651916021681.jpg);
  background-repeat: no-repeat;
  background-size: 100% 100%;
  color: #fff;
  .zhibo-li::-webkit-scrollbar {
  display: none;
}
  .zhibo-body {
    padding: 20px;
    display: flex;
    height: calc(100vh - 20px);
    .zhibo-left {
      width: 25%;
      .zhi-left-zhu {
        display: flex;
        align-items: center;
        img {
          width: 60px;
          height: 60px;
          border-radius: 50%;
        }
        div {
          margin-left: 5px;
          font-size: 20px;
        }
      }
      .zhi-left-current {
        margin-top: 30px;
        img {
          max-height: 20vh;
        }
      }
      .zhi-left-discount {
        margin-top: 20px;
        .discount-span1 {
          font-size: 18px;
        }
        .discount-span2 {
          margin-left: 10px;
          font-size: 16px;
          .discount-span3 {
            color: #fbad15;
          }
        }
      }
    }
    .zhibo-current {
      width: 50%;
      text-align: center;
      h1 {
        font-size: 28px;
        margin-top: 3%;
      }
      h2 {
        font-size: 30px;
        margin-top: 5%;
      }
      .zhibo-shopping {
        font-size: 56px;
        padding: 20px 0;
        // font-family: "CUTISAN";
        span {
          font-size: 16px;
        }
      }
      .zhibo-xiao {
        display: flex;
        justify-content: space-around;
        span {
          font-size: 18px;
          .xiao-shu {
            font-size: 24px;
            color: #fbad15;
          }
        }
      }
      .zhibo-li-top {
        text-align: left;
        padding: 10px;
        font-size: 16px;
        background-color: #103f8f;
        opacity: 0.5;
        display: flex;
        margin-top: 30px;
        span {
          display: inline-block;
          text-align: center;
        }
        .top-shang {
          width: 10%;
        }
        .top-number {
          width: 40%;
          .top-shopplist {
            color: #fbad15;
          }
          text-align: left;
        }
        .top-zhibo {
          width: 10%;
        }
        .top-timeday {
          width: 20%;
        }
        .top-xiaonum {
          width: 10%;
        }
        .top-xiaomoney {
          width: 10%;
        }
      }
      .zhibo-li{
          height:57vh;
          overflow-y: scroll; 
      }
      .zhibo-li-body {
        padding: 10px;
        font-size: 16px;
        display: flex;
        align-items: center;
        span {
          display: inline-block;
          text-align: center;
        }
        .top-shang {
          width: 10%;
          .top-span {
            display: inline-block;
            width: 30px;
            height: 30px;
            border-radius: 50%;
            text-align: center;
            line-height: 30px;
            background-color: #103f8f;
            opacity: 0.5;
          }
        }
        .top-number {
          width: 40%;
          display: flex;
          align-items: center;
          img {
            width: 40px;
            height: 40px;
            border-radius: 5px;
          }
          .top-shopptitle {
            margin-left: 10px;
          }
          text-align: left;
        }
        .top-zhibo {
          width: 10%;
        }
        .top-timeday {
          width: 20%;
        }
        .top-xiaonum {
          width: 10%;
        }
        .top-xiaomoney {
          width: 10%;
        }
      }
      .zhibo-li-wu {
        margin-top: 15px;
        font-size: 18px;
      }
    }
    .zhibo-right {
      width: 25%;
      padding: 0 20px;
      .zhibo-right-top{
          display: flex;
       .right-div{
          width: 50%;
          display: inline-block;
          .div-top{
              font-size: 20px;
              margin-bottom: 10px;
          }
          .div-bottom{
              font-size: 16px;
          }
      }   
      }
    .right-hudong{
      font-size: 20px;
      margin-top: 20px;
    }
    .right-message{
      overflow-y: scroll; 
      height: 80vh;
      margin-bottom: 10px;
      .message-list{
        display: flex;
        margin-top: 20px;
        .message-shijian{
          margin-right: 10px;
          flex: none;
        }
        img{
          width: 30px;
          height: 30px;
          border-radius: 5px;
          margin-right: 10px;
        }
      }
    }
    .right-message::-webkit-scrollbar {
  display: none;
}
    }
  }
  .el-icon-message-solid{
    color: #fbad15;
    font-size: 24px;
  }
}
</style>